<!-- 评价 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="我的供应" :borderBottom="false"></u-navbar>
		<go-top :scrollTop="scrollTop"></go-top>
		<view class="tabs">
			<u-tabs :list="tabs" :is-scroll="false" :current="order_type" @change="settab" bg-color="#F8F8F8"
				active-color="#38BE8C" bar-width="60"></u-tabs>
		</view>
		<view class="wrap" v-if="list.length>0">
			<view class="total" v-if="total>0">共{{total}}个</view>
			<block v-for="(item,index) in list" :key="index">
				<view class="card">
					<navigator class="flex_align" :url="'/home/index/supplydetail?id='+item.id" hover-class="none"
						style="margin: 0 25rpx;">
						<view class="goodsImg">
							<image class="img" :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="details">
							<view class="goodsName clamp3">{{item.title}}</view>
							<!-- <view class="price">￥{{item.money}}/{{item.unit}}</view> -->
							<view class="price">
								<block v-if="item.money != '0.00'">￥{{item.money}}/{{item.unit}}</block>
								<text class="tel" v-else>电话询价</text>
							</view>
							<!-- <view class="sku">产品规格产品规格</view> -->
						</view>
					</navigator>
					<view class="msg flex_bet_align">
						<view>{{item.view}}人查看</view>
						<view>{{item.sales}}人购买</view>
						<view>刷新时间：{{item.createtime}}</view>
					</view>
					<view class="flex_bet_align" style="margin: 0 10rpx;">
						<view class="btn drop" v-if="order_type==0" @click="changeevent(1,item.id)">下架</view>
						<view class="btn drop" v-if="order_type==1" @click="deleteSupply(item.id)">删除</view>
						<view class="btn refresh" v-if="order_type==0" @click="changeevent(2,item.id)">刷新</view>
						<view class="btn hot" v-if="order_type==0" @click="changeevent(3,item.id)">
							{{item.is_hot==1?'热门':'取消热门'}}
						</view>
						<view class="btn hot" v-if="order_type==1" @click="changeevent(1,item.id)">上架</view>
						<view class="btn edit" @click="updata(item.id)">编辑</view>
						<navigator class="btn edit mr0" hover-class="none" :url="'/home/submit/sku_set?id='+item.id">库存
						</navigator>
					</view>
				</view>
			</block>
		</view>
		<view class="not_more" v-if="list.length<1">
			<image src="../static/img/wdingdan.png" mode="widthFix"></image>
			<view class="text">暂无订单</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
		<view style="height:130rpx;"></view>
		<view class="foot flex_align">
			<view @click="renovation()" v-if="list.length>0">一键刷新</view>
			<view @click="updata(0)" class="green">发布供应</view>
		</view>
	</view>
</template>

<script>
	var _this, $paginator, shak;
	export default {
		data() {
			return {
				tabs: [{
						name: '发布中'
					},
					{
						name: '已下架'
					}
				],
				order_type: 0,
				list: [],
				nomore: false,
				scrollTop: 0,
				total: 0,
			}
		},
		onLoad() {
			_this = this
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		//下拉刷新
		onPullDownRefresh() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			// 刷新本页
			isonshow() {
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
			getdata: function(firstLoad = false) {
				$paginator.getData('getmysupply', {
					status: _this.order_type == 0 ? 1 : 2
				}, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 300
						})
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.total = data.total
					_this.nomore = data.nomore
				})
			},
			// 切换发布中还是已下架
			settab(e) {
				_this.click_shake(function() {
					_this.order_type = e
					_this.list = []
					$paginator = new _this.$paginator(_this.$api)
					_this.getdata(true)
				})
			},
			// 跳转编辑供应
			updata(id) {
				uni.navigateTo({
					url: "/home/submit/submitsupply?id=" + id
				})
			},
			// 上下架商品
			changeevent(type, id) {
				_this.click_shake(function() {
					_this.$api.get("changeevent", {
						type: type,
						id: id
					}).then(data => {
						uni.showToast({
							title: "操作成功",
							icon: "none",
							duration: 500
						})
						$paginator = new _this.$paginator(_this.$api)
						_this.getdata(true)
					});
				})
			},
			// 删除信息
			deleteSupply(id) {
				wx.showModal({
					content: '确认删除',
					success(res) {
						if (res.confirm) {
							_this.$api.get("delsupplygoods", {
								id: id
							}).then(data => {
								uni.showToast({
									title: "操作成功",
									icon: "none",
									duration: 500
								})
								$paginator = new _this.$paginator(_this.$api)
								_this.getdata(true)
							});
						}
					}
				})
			},
			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 800)
				}
			},
			// 一键刷新
			renovation() {
				_this.$api.get("onekeyrefresh", {}).then(data => {
					uni.showToast({
						title: "操作成功",
						icon: "none",
						duration: 500
					})
					$paginator = new _this.$paginator(_this.$api)
					_this.getdata(true)
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		font-family: PingFang SC;
		background-color: #F2F2F2;
	}

	.tabbar {
		padding: 20rpx 0;
		background-color: #FFFFFF;

		.item {
			flex: 1;
			text-align: center;
			font-size: 30rpx;
			color: #666666;

			.cur {
				color: #000000;
			}

			.line {
				width: 40rpx;
				height: 5rpx;
				margin: 10rpx auto;
				background: #38be8c;
				border-radius: 3rpx;
			}
		}
	}

	.wrap {
		padding: 25rpx 25rpx 0;
		background-color: #F0F0F0;
		display: inline-block;
		width: 100%;

		.total {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			padding: 13rpx 0 18rpx 25rpx;
			width: 100%;
		}

		.card {
			width: 700rpx;
			height: 443rpx;
			background: #ffffff;
			border-radius: 8rpx;
			padding: 40rpx 0;
			margin-bottom: 24rpx;

			.goodsImg {
				width: 220rpx;
				height: 220rpx;
				border-radius: 8rpx;
				overflow: hidden;
				background-color: #EEEEEE;
				margin-right: 30rpx;

				.img {
					width: 220rpx;
					height: 220rpx;
				}
			}

			.details {
				width: 100%;
				flex: 1;
			}

			.goodsName {
				font-size: 30rpx;
				line-height: 40rpx;
				height: 120rpx;
				color: #333333;
			}

			.price {
				font-size: 36rpx;
				color: #fa2f2f;
				margin: 29rpx 0 0;
			}

			.sku {
				font-size: 24rpx;
				color: #999999;
			}

			.msg {
				font-size: 24rpx;
				color: #bfbfbf;
				margin: 27rpx 25rpx 35rpx;
			}

			.btn {
				flex: 1;
				height: 58rpx;
				border-radius: 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				text-align: center;
				line-height: 58rpx;
				margin-right: 10rpx;
			}

			.mr0 {
				margin-right: 0;
			}

			.drop {
				border: 1rpx solid #e6e6e6;
				color: #666666;
			}

			.refresh {
				border: 1rpx solid #4CADFF;
				color: #4BACFF;
			}

			.hot {
				border: 1rpx solid #FF6000;
				color: #FF6000;
			}

			.edit {
				border: 1rpx solid #38BE8C;
				color: #38BE8C;
			}
		}
	}

	.foot {
		width: 680rpx;
		height: 90rpx;
		font-size: 34rpx;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
		line-height: 90rpx;
		position: fixed;
		bottom: 37rpx;
		left: 36rpx;
		overflow: hidden;
		border-radius: 45rpx;

		view {
			flex: 1;
			background-color: #F89935;
		}

		.green {
			background-color: #38BE8C;
		}
	}
</style>
